<template>
  <el-container>
    <!-- 全局导航栏 -->
    <el-header class="header">
      <el-button type="primary" @click="goBack">返回</el-button>
      <h1>用户信息</h1>
    </el-header>

    <el-main>
      <!-- 用户信息展示区 -->
      <el-card class="user-info-card">
        <div slot="header" class="clearfix">
          <span>个人信息</span>
        </div>
        <el-form :model="userInfo" label-width="100px" class="user-info-form">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="头像">
                <el-avatar :src="userInfo.avatar" :size="80"></el-avatar>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="用户名">
                <el-input v-model="userInfo.username" disabled></el-input>
              </el-form-item>
              <!-- 可以根据需要添加更多用户信息字段 -->
            </el-col>
          </el-row>
        </el-form>
      </el-card>

      <!-- 标签页切换区 -->
      <el-tabs class="tabs-section" v-model="activeTab">
        <el-tab-pane label="收藏的餐厅" name="favorites">
          <el-table :data="favoriteRestaurants" style="width: 100%" class="favorites-table">
            <el-table-column prop="name" label="餐厅名称"></el-table-column>
            <el-table-column label="图片">
              <template #default="scope">
                <el-image :src="getImageUrl(scope.row.image)" fit="cover" class="restaurant-image"></el-image>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="历史操作记录" name="history">
          <el-timeline>
            <el-timeline-item v-for="(action, index) in historyActions" :key="index" :timestamp="action.time">
              {{ action.action }}
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 获取图片 URL 的方法
function getImageUrl(imagePath) {
  return new URL(`../assets/restaurants/${imagePath}`, import.meta.url).href;
}

// 假设这些数据是从API获取的
const userInfo = ref({
  username: '汪云山', // 设置用户名
  avatar: '/src/assets/img.png' // 默认头像路径
})

const favoriteRestaurants = ref([
  {
    id: 1,
    name: '高档餐厅',
    image: 'picture1.jpg'
  },
  {
    id: 2,
    name: '朴素餐厅',
    image: 'picutre2.jpg'
  }
])

const historyActions = ref([
  {
    action: 'Visited Example Restaurant 1',
    time: '2024-12-01'
  },
  {
    action: 'Added Example Restaurant 2 to favorites',
    time: '2024-11-30'
  }
])

const activeTab = ref('favorites') // 默认激活的标签页

// 返回功能
const router = useRouter()
const goBack = () => {
  router.go(-1)
}
</script>

<style scoped>
/* 添加一些样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.user-info-card {
  margin-top: 20px;
}

.user-info-form .el-form-item {
  margin-bottom: 0;
}

.el-avatar {
  margin-top: 10px;
}

.tabs-section {
  margin-top: 20px;
}

.favorites-table .restaurant-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.el-timeline-item {
  margin-bottom: 20px;
}
</style>